{% extends "base.html" %} {% block head %} {{ super() }}
<script src="{{url_for('static', filename='../static/js/control/ztable.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/control/zform.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/app/User.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/datepicker/js/bootstrap-datepicker.js')}}" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../static/datepicker/css/datepicker.css" type="text/css" media="screen" />

<script>
	$(document).ready(function(){
		
		// call back function of $UserList
		function select_user($Row){
			//var id = $Row.attr('row_id');
		}
		
		var $UserForm = $('#user-form').ZForm({
			//errors:{{ errors_json | safe }}
		});
		
		
		
		var $UserList = $('#user-list').ZTable({
			columns:{'username':'Name','email':'Email', 'phone':'Phone','title':'Title', 'role':'Role'},
			datas:{{ users | safe }},
			select_row_cb: select_user});
		
		var user_panel = new UserPanel('user-panel', $UserList, $UserForm);

		
		
	});
	</script>
{% endblock %}


{% block left_area %}
	{{ super() }}
	<div class="left-side-content">
	</div>

{% endblock %}

{% block content %}
<div id="user-panel" class="container">
	<div class="btn-toolbar col-xs-12 col-sm-9 z-btn-area">
		<button class="btn btn-primary col-md-2 z-btn-new" data-toggle="modal" data-target="#user_dialog">New</button>
		<button class="btn btn-primary col-md-2 z-btn-edit" data-toggle="modal" data-target="#user_dialog">Edit</button>
		<button class="btn btn-primary col-md-2 z-btn-del">Delete</button>
	</div>
	<br/>
	<div class="col-xs-12 col-sm-9">
		<table id="user-list"></table>
	</div>

	<!--/span-->
	
	<!-- Modal Dialog -->
	<div class="modal fade" id="user_dialog" tabindex="-1" role="dialog" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title">User</h4>
	      </div>
	      
	      
	      <form id="user-form" action="/submit_user" method="post">
	      
	      <div class="modal-body">
	      
	      		<div class="row form-group">
					<div class="z-label col-md-2">{{ 'Username' }}</div>
					<div class="col-md-7">
						<input class="form-control" type="text" name="username" placeholder="{{ 'Username' }}" />
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>
		
				<div class="row form-group">
					<div class="z-label col-md-2">{{ 'Password' }}</div>
					<div class="col-md-7">
						<input class="form-control" type="text" name="password" placeholder="{{ 'Enter password' }}" />
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>

				<div class="row form-group">
					<div class="z-label col-md-2">{{ 'Email' }}</div>
					<div class="col-md-7">
						<input class="form-control" type="text" name="email" placeholder="{{ 'Enter email' }}" />
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>

				<div class="row form-group">
					<div class="z-label col-md-2">{{ 'Phone' }}</div>
					<div class="col-md-7">
						<input class="form-control" type="text" name="phone" placeholder="{{ 'Phone number' }}" />
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>
						
				<div class="row form-group">
					<div class="z-label col-md-2">{{ 'Role' }}</div>
					<div class="col-md-7">
						<select class="form-control" name="role">
							<option value=0>{{'Admin'}}</option>
							<option value=1>{{'User'}}</option>
						</select>
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>
		
				<div class="row form-group" name="title">
					<div class="z-label col-md-2">{{ 'Title' }}</div>
					<div class="col-md-7">
						<select class="form-control z-input">
							<option value=0>{{'Project Manager'}}</option>
							<option value=1>{{'Team Lead'}}</option>
							<option value=2>{{'Developer'}}</option>
							<option value=3>{{'Tester'}}</option>
						</select>
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>

				<input class="hide" type="text" name="mode" />
				<input class="hide" type="text" name="id" />
			
	
	      </div>
	      <div class="modal-footer">
	        <button class="btn btn-default canel" data-dismiss="modal">Close</button>
	        <button class="btn btn-primary submit">Save changes</button>
	      </div>
	      
	      </form>
	      
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
</div>
{% endblock %}

{% block right_area %}
	<div class="right-side-area col-md-2">
		hello right
	</div>
{% endblock %}


